<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2021-10-26 08:36:22
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-05-12 16:41:47
-->
<template>
  <div>
    <el-dialog
      title="学校分配"
      :visible.sync="dialog.schoolShow"
      width="55%"
      @close="schoolClose"
      :close-on-click-modal="false"
    >
      <el-form
        :model="schoolForm"
        ref="schoolForm"
        :rules="schoolRules"
        label-position="top"
        class="schDia"
        v-if="dialog.schoolShow"
      >
        <el-form-item label="考试批次" prop="batch">
          <el-input
            v-model="schoolForm.batch"
            style="width: 330px"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="考试名称" prop="name">
          <el-input
            v-model="schoolForm.name"
            style="width: 330px"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item
          label="报名人数"
          prop="number"
          v-if="this.schoolForm.schoolName !== 0"
        >
          <el-input
            v-model="schoolForm.number"
            style="width: 330px"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="学校名称" prop="schoolName">
          <el-select
            v-model="schoolForm.schoolName"
            placeholder="请选择学校"
            clearable
            style="width: 330px"
            @change="getExam"
          >
            <el-option
              v-for="item in schoolData"
              :key="item.deptId"
              :label="item.deptName"
              :value="item.deptId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="考试名称"
          prop="testName"
          v-if="this.schoolForm.schoolName !== 0"
        >
          <el-select
            v-model="schoolForm.testName"
            placeholder="请选择考试名称"
            clearable
            style="width: 330px"
            @change="examNameChange"
          >
            <el-option
              v-for="item in examData"
              :key="item.id"
              :label="item.examName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <span slot="footer">
        <el-button @click="dialog.schoolShow = false">取消</el-button>
        <el-button type="primary" @click="submitOrder">提交订单</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="订单支付"
      :visible.sync="dialogOrder"
      width="50%"
      custom-class="dialogClass"
      v-if="dialogOrderEject"
      @close="OrderClose"
      v-loading="loading"
      :close-on-click-modal="false"
    >
      <div class="basics">订单详情</div>
      <div class="basics-detail-info" style="margin-top: 10px">
        考试名称：<span>{{ examDetail.examName }}</span>
      </div>
      <!-- <div class="basics-detail-info">
        考试批次：<span>{{ drawerData.batchName }}</span>
      </div> -->
      <div class="basics-detail">
        <div class="basics-detail-info">
          报名人数：<span>{{ drawerData.peopleNum }}人</span>
        </div>
        <div class="basics-detail-info">
          应付金额：<span class="priceall"
            >¥ {{ examDetail.price * drawerData.peopleNum }}</span
          >
        </div>
      </div>
      <div v-if="drawerData.price !== '0.00'">
        <div class="typeAtip">
          <div class="basics" style="margin-top: 30px; margin-right: 20px">
            支付方式
          </div>
          <div
            style="
              margin-top: 32px;
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #ff0000;
            "
          >
            注：支付成功之前请勿关闭页面！
          </div>
        </div>
        <div class="exainfoPay">
          <div class="payment-all">
            <div
              class="payment"
              v-if="chatShow"
              @click="chat"
              :class="{ active: chioose == 0 }"
            >
              <img src="@/assets/images/wechat.png" alt="" />
              微信支付
              <div class="payment-img" v-if="chioose == 0">
                <img src="@/assets/images/xiabiao.png" alt="" />
              </div>
            </div>
            <div
              class="payment"
              v-if="aliShow"
              @click="ali"
              :class="{ active: chioose == 1 }"
            >
              <img src="@/assets/images/paybaby.png" alt="" />
              支付宝支付
              <div class="payment-img" v-if="chioose == 1">
                <img src="@/assets/images/xiabiao.png" alt="" />
              </div>
            </div>
            <div
              class="payment"
              @click="offline"
              v-if="onlineShow"
              :class="{ active: chioose == 2 }"
            >
              <img src="@/assets/images/xianxia.png" alt="" />
              线下支付
              <div class="payment-img" v-if="chioose == 2">
                <img src="@/assets/images/xiabiao.png" alt="" />
              </div>
            </div>
          </div>
          <div class="">
            <div class="payimg" v-if="chioose == 0">
              <div class="QRCode">
                <img :src="PayImgUrl" alt="" />
                <div class="footer">
                  <i class="iconfont icon-saoyisao"></i>
                  <div class="footer-zi">
                    <div>打开微信</div>
                    <div>扫一扫付款</div>
                  </div>
                </div>
              </div>
              <div class="wxS">
                <img src="@/assets/images/wxS.jpg" alt="" />
              </div>
            </div>
            <div class="payimg" v-else-if="chioose == 1">
              <div class="QRCode">
                <img :src="PayImgUrl" alt="" />
                <div class="footer">
                  <i class="iconfont icon-saoyisao"></i>
                  <div class="footer-zi">
                    <div>打开支付宝</div>
                    <div>扫一扫付款</div>
                  </div>
                </div>
              </div>
              <div class="wxS">
                <img src="@/assets/images/wxS.jpg" alt="" />
              </div>
            </div>
            <div v-else-if="chioose == 2" class="comInfo">
              <div class="basics">订单详情</div>
              <div class="basics-detail">
                <div class="basics-detail-info">
                  账户名称：<span>{{ drawerData.orgName }}</span>
                </div>
                <div class="basics-detail-info">
                  开户银行：<span>{{ fwData.bank }}</span>
                </div>
                <div class="basics-detail-info">
                  银行账号：<span>{{ fwData.bankAccount }}</span>
                </div>
                <div class="basics-detail-info">
                  汇款金额：<span>
                    ¥ {{ examDetail.price * drawerData.peopleNum }}
                  </span>
                </div>
              </div>
              <div class="basics-detail-info lastInfo">
                <span>付款回执：</span>
                <span>
                  <el-upload
                    ref="upload"
                    action="#"
                    :auto-upload="false"
                    accept="image/jpeg,image/png"
                    :limit="1"
                    :on-change="getFile"
                    :file-list="fileList"
                    :on-remove="handleRemove"
                    class="uploadlast"
                  >
                    <i class="el-icon-plus"></i>
                  </el-upload>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer">
        <div class="downTip">支付成功之前请勿关闭页面！</div>
        <span>应付金额：</span>
        <span style="margin-right: 20px">
          ¥ {{ examDetail.price * drawerData.peopleNum }}
        </span>
        <el-button type="primary" @click="payImmediately" v-if="chioose == 2">
          已完成支付
        </el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="订单支付"
      :visible.sync="insideShow"
      width="50%"
      custom-class="dialogClass"
      v-if="insideShowEject"
      @close="insideClose"
      :close-on-click-modal="false"
      v-loading="loading"
    >
      <div class="basics">订单详情</div>
      <div class="basics-detail">
        <div class="basics-detail-info">
          应付金额：<span>¥ {{ drawerData.price }}</span>
        </div>
        <div class="basics-detail-info">
          考试名称：<span>{{ drawerData.examName }}</span>
        </div>
        <div class="basics-detail-info">
          考试批次：<span>{{ drawerData.batchName }}</span>
        </div>
        <div class="basics-detail-info">学校名称：<span>内部</span></div>
      </div>
      <div v-if="drawerData.price !== '0.00'">
        <div class="basics" style="margin-top: 30px">支付方式</div>
        <div class="exainfoPay">
          <div class="payment-all">
            <div class="payment active">
              <img src="@/assets/images/xianxia.png" alt="" />
              支出金额
              <div class="payment-img">
                <img src="@/assets/images/xiabiao.png" alt="" />
              </div>
            </div>
          </div>
          <div class="">
            <div class="comInfo">
              <div class="basics">支出金额</div>
              <div class="basics-detail">
                <el-form
                  :model="moneyForm"
                  ref="moneyForm"
                  :rules="moneyRules"
                  label-position="top"
                  :inline="false"
                  size="normal"
                >
                  <el-form-item label="支出金额" prop="money">
                    <el-input
                      v-model="moneyForm.money"
                      style="width: 330px"
                       type="number"
                    ></el-input>
                  </el-form-item>
                </el-form>
              </div>
              <div class="basics">上传凭证</div>
              <div class="basics-detail-info lastInfo" style="margin-top: 10px">
                <span>
                  <el-upload
                    ref="upload"
                    action="#"
                    :auto-upload="false"
                    accept="image/jpeg,image/png"
                    :limit="1"
                    :on-change="getFile"
                    :file-list="fileList"
                    :on-remove="handleRemove"
                    class="uploadlast"
                  >
                    <i class="el-icon-plus"></i>
                  </el-upload>
                </span>
              </div>
              <!-- <div class="load lastInfo">
                <el-upload
                  ref="upload"
                  action="#"
                  list-type="picture-card"
                  :auto-upload="false"
                  accept="image/jpeg,image/png"
                  :limit="1"
                  :on-change="getFile"
                  :file-list="fileList"
                  :on-remove="handleRemove"
                  class="uploadlast"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
              </div> -->
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="downTip">
        <div class="tip">支付成功之前请勿关闭页面！</div>
        <div>
          <span>应付金额：</span>
          <span style="margin-right: 20px"> ¥ {{ drawerData.price }} </span>
          <el-button type="primary" @click="payOffline"> 已完成支付 </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { selectDeptInfoByOrgId } from "@/api/registration";
import { checkPay } from "@/api/currency";
import {
  getSchoolList,
  getSchoolExam,
  chatPay,
  chatQuery,
  chatCancel,
  aliPay,
  aliQuery,
  aliCancel,
  offlinePay,
} from "@/api/arrange";
export default {
  filters: {
    testName: function (value) {
      this.examData.forEach((item) => {
        if (item.id == value) {
          value == item.examName;
        }
      });
      return value;
    },
  },
  props: {
    dialog: {
      type: Object,
      required: true,
    },
    drawerData: {
      type: Object,
      required: true,
    },
  },
  created() {},
  data() {
    return {
      allPrice: "",
      examDetail: {},
      chatShow: true,
      aliShow: true,
      onlineShow: true,
      loading: false,
      moneyRules: {
        money: [{ required: true, message: "请输入金额", trigger: "blur" }],
      },
      moneyForm: {
        money: "",
      },
      insideShowEject: false,
      insideShow: false,
      voucher: "",
      timer: null,
      timer2: null,
      endTime: 0,
      PayImgUrl: "",
      orderNumber: "",
      fileList: [],
      chioose: Number,
      fwData: {},
      dialogOrder: false,
      dialogOrderEject: false,
      examData: [],
      schoolData: [],
      schoolRules: {
        batch: [{ required: true, message: "请输入考试批次", trigger: "blur" }],
        name: [{ required: true, message: "请输入考试名称", trigger: "blur" }],
        number: [
          { required: true, message: "请输入报名人数", trigger: "blur" },
        ],
        schoolName: [
          { required: true, message: "请选择学校名称", trigger: "change" },
        ],
        testName: [
          { required: true, message: "请选择考试名称", trigger: "change" },
        ],
      },
      schoolForm: {
        batch: this.drawerData.batchName,
        name: this.drawerData.examName,
        number: this.drawerData.peopleNum,
        schoolName: "",
        testName: "",
      },
    };
  },
  watch: {
    drawerData: {
      deep: true,
      handler(val) {
        if (val) {
          this.schoolForm.batch = this.drawerData.batchName;
          this.schoolForm.name = this.drawerData.examName;
          this.schoolForm.number = this.drawerData.peopleNum;
        }
      },
    },
  },
  created() {
    this.getSchoolData();
    this.moneyForm.money = "";
  },
  methods: {
    examNameChange(val) {
      this.examData.forEach((item) => {
        if (item.id == val) {
          this.examDetail = item;
        }
      });
    },
    // 获取已配置信息
    checkPay() {
      checkPay({
        orgId: this.schoolForm.schoolName,
      }).then((res) => {
        if (res.wx !== 1) {
          this.chatShow = false;
        }
        if (res.ali !== 1) {
          this.aliShow = false;
        }
        if (res.yl !== 1) {
          this.onlineShow = false;
        }
        if (this.chatShow == true) {
          this.chat();
        } else if (this.chatShow == false && this.aliShow == true) {
          this.ali();
        } else if (
          this.chatShow == false &&
          this.aliShow == false &&
          this.onlineShow == true
        ) {
          this.offline();
        }
      });
    },
    // 内部支付关闭
    insideClose() {
      this.insideShowEject = false;
    },
    // 内部线下支付
    payOffline() {
       if (this.voucher == "") return this.$message.info("请上传支付凭证");
      this.$refs.moneyForm.validate((valid) => {
        if (!valid) return;
        this.loading = true;
        var fd = new FormData();
        fd.append("schoolId", 0);
        fd.append("schoolExamId", this.schoolForm.testName);
        fd.append("orderNo", this.drawerData.orderNo);
        fd.append("amount", this.moneyForm.money);
        fd.append("id", this.drawerData.id);
        fd.append("file", this.voucher);
        fd.append("examId", this.drawerData.examId);
        fd.append("batchId", this.drawerData.batchId);
        offlinePay(fd).then((res) => {
          this.$message.success(res.msg);
          this.dialog.schoolShow = false;
          this.insideShow = false;
          this.loading = false;
          this.$parent.getList();
        });
      });
    },
    // 关闭学校分配
    schoolClose() {
      this.dialog.schoolShow = false;
      clearInterval(this.timer);
      clearInterval(this.timer2);
      this.fileList = [];
      this.PayImgUrl = "";
      this.orderNumber = "";
      this.chioose = Number;
      // this.schoolForm.batch = "";
      // this.schoolForm.name = "";
      // this.schoolForm.number = "";
      this.schoolForm.schoolName = "";
      this.schoolForm.testName = "";
    },
    // 线下已完成支付
    payImmediately() {
      if (this.voucher == "") return this.$message.info("请上传支付凭证");
      this.loading = true;
      var fd = new FormData();
      fd.append("schoolId", this.schoolForm.schoolName);
      fd.append("schoolExamId", this.schoolForm.testName);
      fd.append("orderNo", this.drawerData.orderNo);
      fd.append("id", this.drawerData.id);
      fd.append("amount", this.examDetail.price * this.drawerData.peopleNum);
      fd.append("file", this.voucher);
      fd.append("examId", this.drawerData.examId);
      fd.append("batchId", this.drawerData.batchId);
      offlinePay(fd).then((res) => {
        this.$message.success(res.msg);
        this.dialog.schoolShow = false;
        this.$parent.getList();
        this.loading = false;
        return (this.dialogOrder = false);
      });
    },
    // 获取文件
    getFile(file) {
      this.voucher = file.raw;
    },
    // 移除上传的文件
    handleRemove(file) {
      let fileList = this.$refs.upload.uploadFiles;
      let index = fileList.findIndex((fileItem) => {
        return fileItem.uid === file.uid;
      });
      fileList.splice(index, 1);
    },
    // 关闭支付dialog
    OrderClose() {
      this.dialogOrderEject = false;
      clearInterval(this.timer);
      clearInterval(this.timer2);
    },
    // 微信支付
    chat() {
      this.chioose = 0;
      clearInterval(this.timer2);
      clearInterval(this.timer);
      this.endTime = 0;
      let that = this;
      console.log(that.schoolForm.schoolName);
      chatPay({
        schoolId: that.schoolForm.schoolName,
        id: that.drawerData.id,
        examName: that.drawerData.examName,
        amount: that.examDetail.price * that.drawerData.peopleNum,
      }).then((res) => {
        this.PayImgUrl = res.data.imgae;
        this.orderNumber = res.data.orderNumber;
        that.timer2 = setInterval(function () {
          that.endTime = that.endTime + 3;
          if (that.endTime == 60) {
            clearInterval(that.timer2);
            chatCancel({
              schoolId: that.schoolForm.schoolName,
              orderNumber: that.orderNumber,
            }).then((res) => {
              console.log(res);
            });
            return (that.endTime = 0);
          }
          chatQuery({
            id: that.drawerData.id,
            schoolId: that.schoolForm.schoolName,
            schoolExamId: that.schoolForm.testName,
            peopleNumber: that.schoolForm.number,
            orderNo: that.drawerData.orderNo,
            amount: that.examDetail.price * drawerData.peopleNum,
            orderNumber: that.orderNumber,
            batchId: that.drawerData.batchId,
            examId: that.drawerData.examId,
          }).then((res) => {
            if (res.msg == "SUCCESS") {
              that.$message.success("支付成功");
              clearInterval(that.timer2);
              that.endTime = 0;
              that.dialog.schoolShow = false;
              that.$parent.getList();
              return (that.dialogOrder = false);
            }
          });
        }, 3000);
      });
    },
    // 阿里支付
    ali() {
      clearInterval(this.timer);
      clearInterval(this.timer2);
      this.endTime = 0;
      let that = this;
      this.chioose = 1;
      aliPay({
        schoolId: that.schoolForm.schoolName,
        id: that.drawerData.id,
        examName: that.drawerData.examName,
        amount: that.examDetail.price * that.drawerData.peopleNum,
      }).then((res) => {
        this.PayImgUrl = res.data.imgae;
        this.orderNumber = res.data.orderNumber;
        that.timer = setInterval(function () {
          that.endTime = that.endTime + 3;
          if (that.endTime == 60) {
            clearInterval(that.timer);
            aliCancel({
              schoolId: that.schoolForm.schoolName,
              orderNumber: that.orderNumber,
            }).then((res) => {
              console.log(res);
            });
            return (that.endTime = 0);
          }
          aliQuery({
            id: that.drawerData.id,
            schoolId: that.schoolForm.schoolName,
            schoolExamId: that.schoolForm.testName,
            peopleNumber: that.schoolForm.number,
            orderNo: that.drawerData.orderNo,
            amount: that.examDetail.price * that.drawerData.peopleNum,
            orderNumber: that.orderNumber,
            batchId: that.drawerData.batchId,
            examId: that.drawerData.examId,
          }).then((res) => {
            if (res.msg == "TRADE_SUCCESS") {
              that.$message.success("支付成功");
              clearInterval(that.timer);
              that.endTime = 0;
              // that.storage();
              that.dialog.schoolShow = false;
              that.$parent.getList();
              return (that.dialogOrder = false);
            }
          });
        }, 3000);
      });
    },
    // 线下支付
    offline() {
      if (this.timer !== null) {
        clearInterval(this.timer);
      }
      clearInterval(this.timer2);
      this.chioose = 2;
      selectDeptInfoByOrgId({
        orgId: this.schoolForm.schoolName,
      }).then((res) => {
        this.fwData = res.data;
      });
    },
    // 提交订单
    submitOrder() {
      console.log(this.schoolForm);
      this.$refs.schoolForm.validate((valid) => {
        if (!valid) return;
        if (this.schoolForm.schoolName !== 0) {
          this.dialogOrderEject = true;
          this.$nextTick(function () {
            this.dialogOrder = true;
            this.checkPay();
          });
        } else {
          this.insideShowEject = true;
          this.$nextTick(function () {
            this.insideShow = true;
          });
        }
      });
    },
    // 获取学校列表
    getSchoolData() {
      getSchoolList().then((res) => {
        this.schoolData = res.data;
      });
    },
    getExam(val) {
      if (val !== 0) {
        getSchoolExam({
          schoolId: val,
        }).then((res) => {
          console.log(res);
          this.examData = res.data;
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.schDia {
  display: flex;
  flex-wrap: wrap;
  .el-form-item:nth-child(2n) {
    margin-left: 50px;
  }
}
.basics {
  position: relative;
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #2b2b2b;
  margin-top: 10px;
}
.basics::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 1px;
  width: 3px;
  height: 14px;
  background: #1267fa;
}
.basics-detail {
  margin-top: 20px;
  .basics-detail-info {
    margin-top: 10px;
    margin-bottom: 10px;
    span {
      margin-left: 40px;
    }
  }
}
.exainfoPay {
  display: flex;
  .payment-all {
    .payment {
      margin-top: 16px;
      width: 235px;
      height: 71px;
      line-height: 71px;
      border-radius: 2px;
      border: 1px solid #d6d6d6;
      text-align: center;
      margin-right: 20px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      position: relative;
      .payment-img {
        position: absolute;
        bottom: -27px;
        right: -1px;
      }
      img {
        width: 22px;
        height: 22px;
        vertical-align: middle;
        margin-bottom: 4px;
      }
    }
  }
}
.active {
  border: 1px solid #1267fa !important;
}
.load {
  margin-top: 20px;
}
.payimg {
  width: 414px;
  background-color: #f6f7f8;
  height: 215px;
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
  padding-top: 22px;
  .QRCode {
    width: 139px;
    height: 175px;
    margin-left: 38px;
    background-color: #fff;
    img {
      width: 120px;
      height: 120px;
      margin-left: 10px;
      margin-top: 8px;
    }
    .footer {
      display: flex;
      justify-content: center;
      .footer-zi {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #6a6d7c;
      }
      i {
        margin-right: 10px;
        color: #1267fa;
      }
    }
  }
  .wxS {
    width: 173px;
    height: 197px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.comInfo {
  box-sizing: border-box;
  width: 414px;
  height: 234px;
  background-color: #f6f7f8;
  padding: 10px 20px;
  margin-top: 10px;
}
/deep/ .el-dialog__footer {
  .downTip {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
}
.typeAtip {
  display: flex;
}
.priceall {
  font-size: 18px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 600;
  color: #ff0000;
}
.lastInfo {
  display: flex;
  .uploadlast {
    display: flex;
    align-items: flex-start;
    /deep/ .el-upload-list__item {
      margin-top: 0 !important;
      line-height: 1.1;
      .el-upload-list__item-name {
        width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>